<script setup>
import {computed} from 'vue'

//接收参数
const props = defineProps({
  commodityOrder: {
    type: Object,
    default: () => ({})
  },
  showDivider: {
    type: Boolean,
    default: false
  },
  isOrder: {
    type: Boolean,
    default: false
  },
  url: {
    type: String,
    default: ''
  }
})

//获取商品信息
const commodity = computed(() => props.commodityOrder.commodity_id[0])

//获取文字
const specifications = computed(() => {
  const {weight, amount, commodity_id} = props.commodityOrder
  //规格
  const specificat = `规格：${weight}/${commodity_id[0].unit}`
  //数目
  const count = `数量：${amount}/${commodity_id[0].unit}`
  return [specificat, count]
})
</script>

<template>
  <view hover-class="none" class="commodity-order-item">
    <!-- 顶部 -->
    <view class="top">
      <slot name="top-left"></slot>
      <slot name="top-right"></slot>
    </view>

    <!-- 内容 -->
    <view class="bottom" :class="{'show-divider': showDivider}">
      <!-- 图片 -->
      <view class="left">
        <image class="img" :src="commodity.img_src" mode="aspectFill"/>
      </view>

      <!-- 信息 -->
      <view class="right">
        <view class="title">
          {{ commodity.name }}
        </view>

        <!-- 下方区域 -->
        <view class="info">
          <!-- 规格 -->
          <view class="specificat">
            <text>{{ specifications[0] }}</text>
            <text>{{ specifications[1] }}</text>
          </view>
          <!-- 左边价格 -->
          <price :price="commodityOrder.unit_price" hide-unit/>
        </view>
      </view>

    </view>
  </view>
</template>

<style lang="scss" scoped>
.commodity-order-item, .specificat {
  @include grid-box(false, true);
}

.bottom {
  @include grid-box;
}

.top, .info {
  @include flex-box(false);
  justify-content: space-between;
  align-content: flex-end;
}

.commodity-order-item, .bottom {
  gap: $spacing-4;
}

.commodity-order-item {
  background: $light-bg;
  padding: $spacing-5 $spacing-3 $spacing-4;
  border-radius: $border-radius-3;
}

.bottom {
  grid-template-columns: auto 1fr;

  &.show-divider {
    border-top: 2rpx $divider dashed;
    padding-top: $spacing-3;
  }

  .left {
    margin: $spacing-5 0;
    border-radius: $border-radius-3;
    overflow: hidden;
    width: 160rpx;
    height: 160rpx;
    background: $light-bg;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .right {
    @include flex-box(false, true);
    justify-content: space-between;

    .title {
      @include rows-ellipsis(2);
    }

    .info {
      @include flex-box();
      align-items: flex-end;
      justify-content: space-between;

      .specificat {
        font-size: $font-size-4;
        color: $black-2;
      }
    }
  }
}
</style>
